<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Redux</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

      const sort = (state="SORTED_BY_DATE", action) => {
          switch (action.type) {
              case "SORT_COLORS":
                  return action.sortBy
              default :
                  return state
          }
      }

      let state = "SORTED_BY_DATE"



      let action =  {
           type: "SORT_COLORS",
           sortBy: "SORTED_BY_TITLE"
      }
      let nextState = sort(state, action)
      console.log( nextState )


      action = {
           type: "SORT_COLORS",
           sortBy: "SORTED_BY_RATING"
      }
      nextState = sort(nextState, action)
      console.log( nextState )


      action = {
           type: "SORT_COLORS",
           sortBy: "SORTED_BY_DATE"
      }
      nextState = sort(nextState, action)
      console.log( nextState )

  </script>
</body>
</html>
